<template>
  <div>
    <template v-if="noteComment.childrenList">
      <div >
        <div  class="comment-title">
          <div class="comment-title-interval">
            <img :src="gen_text_img([30,30],noteComment.name,noteComment.name.length % 5)" />
          </div>
          <div class="comment-title-interval">
            <h2 style="padding:0;margin:0;">{{noteComment.name}}</h2>
          </div>
          <span style="padding-top: 2px;" class="comment-title-interval">{{noteComment.create_time}}</span>
          <el-button type="text" @click="setCallback(noteComment)" class="comment-title-interval">回复</el-button>
        </div>
        <div style="padding: 15px;" class="comment-background">{{noteComment.content}}</div>
      </div>
      <my-comment style="margin-left:15px;" class="comment-panel " v-for="item in noteComment.childrenList" :key="item.id" :noteComment="item" @setCallback="setCallback"></my-comment>
    </template>
  </div>
</template>
<script>
export default {
  name: 'myComment',
  props: {
    noteComment: {
      type: Object,
      default: () => {}
    }
  },
  data: function () {
    return {
      delete: true,
      note: {},
      originContent: '',
      htmlContents: []
    }
  },
  watch: {

  },
  created () {
  },
  methods: {
    setCallback: function (comment) {
      this.$emit('setCallback', comment)
    },
    gen_text_img: function (size, s, index) {
      let colors = [
        'rgb(76,55,26)', 'rgb(229,133,206)', 'rgb(43,33,90)', 'rgb(104,158,103)', 'rgb(80,80,80)'
      ]
      let cvs = document.createElement('canvas')
      cvs.setAttribute('width', size[0])
      cvs.setAttribute('height', size[1])
      let ctx = cvs.getContext('2d')
      ctx.fillStyle = colors[index % 5]
      ctx.fillRect(0, 0, size[0], size[1])
      ctx.fillStyle = 'rgb(255,255,255)'
      ctx.font = size[0] * 0.6 + 'px Arial'
      ctx.textBaseline = 'middle'
      ctx.textAlign = 'center'
      ctx.fillText(s.substring(0, 1), size[0] / 2, size[1] / 2)
      return cvs.toDataURL('image/jpeg', 1)
    }
  }
}
</script>
